<template>
  <div class="actions-container" :style="{ height }">
    <a-button-group>
      <template v-for="(value, name, index) in option" :key="index">
        <action-button-confirm v-if="value.confirmOpera || name === 'remove'" :option="value" :name="name" :typeCorrect="typeCorrect"/>
        <action-button v-has v-commit v-else :option="value" :name="name" :typeCorrect="typeCorrect"/>
      </template>
      <slot></slot>
    </a-button-group>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import ActionButton from '../action-button/index.vue';
import ActionButtonConfirm from '../action-button-confirm/index.vue';
import { ActionsOption } from '@/components/typing';

export default defineComponent({
  name: 'Actions',
  props: {
    option: Object as PropType<ActionsOption>,
     option1: Object as PropType<ActionsOption>,
    height: {
      type: String,
      default: '50px'
    }
  },
  setup() {
    const typeCorrect = (key: string, type: string): string => {
      if(key === 'remove') return 'danger';
      if(!type) return 'default';
      return type
    }

    return {
      typeCorrect
    };
  },
  components: {
    ActionButton,
    ActionButtonConfirm
  },
});
</script>

<style lang="less" scoped>
.actions-container {
  width: 100%;
  background: #e3e3e3;
  overflow-y: hidden;
  overflow-x: auto;
  display: flex;
  align-items: center;
  padding: 0 6px 0 6px;
  box-sizing: border-box;
  border: 1px solid #b7b7b7;
}
</style>
